<template>
    <div class="index-container">
        <ul  class="examine-type clear">
            <li :class="{fl:true, pointer:true, active:activeComponent=='first'}" @click="changeTab('first')">
                <span>发起审批</span>
            </li>
            <li :class="{fl:true, pointer:true, active:activeComponent=='second'}" @click="changeTab('second')">
                <el-badge v-if="examineByMeNum != 0" :max="99" :value="examineByMeNum" class="item"><span>待我审批的</span></el-badge>
                <span v-else>待我审批的</span>
            </li>
            <li :class="{fl:true, pointer:true, active:activeComponent=='third'}" @click="changeTab('third')">
                <span>我已审批的</span>
            </li>
            <li :class="{fl:true, pointer:true, active:activeComponent=='fourth'}" @click="changeTab('fourth')">
                <span>我发起的</span>
            </li>
            <li :class="{fl:true, pointer:true, active:activeComponent=='fifth'}" @click="changeTab('fifth')">
                <!-- <el-badge v-if="copyMeNum != 0" :max="99" :value="copyMeNum" class="item">抄送我的</el-badge> -->
                <span>抄送我的</span>
            </li>
            <li class="fr">
                <div v-if="activeComponent=='first'">
                    <input ref="search1" type="text" v-model="keyWord1" @keydown.enter.trim="searchExamine1" @change="searchExamine1" placeholder="审批单名称">
                    <i v-if="!keyWord1" @click="searchExamine1" class="el-icon-search pointer"></i>
                    <i v-else @click="initExamine1" class="el-icon-circle-close"></i>
                </div>
                <div v-if="activeComponent=='second'">
                    <input ref="search2" type="text" v-model="keyWord2" @keydown.enter.trim="searchExamine2" @change="searchExamine2" placeholder="审批发起人、审批标题">
                    <i v-if="!keyWord2" @click="searchExamine2" class="el-icon-search pointer"></i>
                    <i v-else @click="initExamine2" class="el-icon-circle-close"></i>
                </div>
                <div v-if="activeComponent=='third'">
                    <input ref="search3" type="text" v-model="keyWord3" @keydown.enter.trim="searchExamine3" @change="searchExamine3" placeholder="审批发起人、审批标题">
                    <i v-if="!keyWord3" @click="searchExamine3" class="el-icon-search pointer"></i>
                    <i v-else @click="initExamine3" class="el-icon-circle-close"></i>
                </div>
                <div v-if="activeComponent=='fourth'">
                    <input ref="search4" type="text" v-model="keyWord4" @keydown.enter.trim="searchExamine4" @change="searchExamine4" placeholder="审批标题">
                    <i v-if="!keyWord4" @click="searchExamine4" class="el-icon-search pointer"></i>
                    <i v-else @click="initExamine4" class="el-icon-circle-close"></i>
                </div>
                <div v-if="activeComponent=='fifth'">
                    <input ref="search5" type="text" v-model="keyWord5" @keydown.enter.trim="searchExamine5" @change="searchExamine5" placeholder="审批发起人、审批标题">
                    <i v-if="!keyWord5" @click="searchExamine5" class="el-icon-search pointer"></i>
                    <i v-else @click="initExamine5" class="el-icon-circle-close"></i>
                </div>
            </li>
        </ul>
        
        <first ref="first" v-show="activeComponent=='first'" />
        <second ref="second" v-show="activeComponent=='second'" @changeExamineByMeNum="changeExamineByMeNum" />
        <third ref="third" v-show="activeComponent=='third'" />
        <fourth ref="fourth" v-show="activeComponent=='fourth'" />
        <fifth ref="fifth" v-show="activeComponent=='fifth'" />

    </div>
</template>

<script type="text/javascript">
    import first from './sponsor-examine.vue';
    import second from './examine-by-me.vue';
    import third from './i-have-examine.vue';
    import fourth from './my-examine.vue';
    import fifth from './copy-me.vue';

    export default {
        name: 'examineHome',
        data(){
            return {
                activeComponent: 'first',   // 当前聚焦的值
                keyWord1: '',   // 搜索关键字（发起审批）
                keyWord2: '',   // 搜索关键字（待我审批的）
                keyWord3: '',   // 搜索关键字（我已审批的）
                keyWord4: '',   // 搜索关键字（我发起的）
                keyWord5: '',   // 搜索关键字（抄送我的）
                examineByMeNum: 0,   // 待我审批的未处理审批单数量
                copyMeNum: 0,   // 抄送我的未读取审批单数量
            }
        },
        mounted(){
            console.log(this.$route.query)
            this.$refs.second.$children[0].getList();
            this.$nextTick(() => {
                if(this.$route.query.scanType){
                    let type = this.$route.query.scanType;
                        console.log(111)
                    if(type == '1'){
                        console.log(222)
                        this.changeTab('second');
                    }
                    else if(type == '2'){
                        this.changeTab('third');
                    }
                    else if(type == '3'){
                        this.changeTab('fourth');
                    }
                    else if(type == '4'){
                        this.changeTab('fifth');
                    }
                }
            })
        },
        components: {
            first,
            second,
            third,
            fourth,
            fifth
        },
        methods: {
            // 切换tab类型时执行的方法
            changeTab(tabName){
                this.activeComponent = tabName;

                if(tabName == 'first'){
                    // 每次切换tab要更新tab的列表数据
                    this.$refs[tabName].getList();
                }else{
                    // 每次切换tab要更新tab的列表数据
                    this.$refs[tabName].$children[0].getList(1,'changePage');
                }

            },
            // 搜索列表（发起审批）
            searchExamine1(){
                this.keyWord1 = this.keyWord1.trim();
                this.$refs.search1.blur();
                this.$refs.first.getList(this.keyWord1);
            },
            // 初始化列表（发起审批）
            initExamine1(){
                this.keyWord1 = '';
                this.$refs.search1.blur();
                this.$refs.first.getList(this.keyWord1);
            },

            // 搜索列表（待我审批的）
            searchExamine2(){
                this.keyWord2 = this.keyWord2.trim();
                this.$refs.search2.blur();
                this.$refs.second.$children[0].getList(this.keyWord2);
            },
            // 初始化列表（待我审批的）
            initExamine2(){
                this.keyWord2 = '';
                this.$refs.search2.blur();
                this.$refs.second.$children[0].getList(this.keyWord2);
            },

            // 搜索搜索列表（我已审批的）
            searchExamine3(){
                this.keyWord3 = this.keyWord3.trim();
                this.$refs.search3.blur();
                this.$refs.third.$children[0].getList(this.keyWord3);
            },
            // 初始化列表（我已审批的）
            initExamine3(){
                this.keyWord3 = '';
                this.$refs.search3.blur();
                this.$refs.third.$children[0].getList(this.keyWord3);
            },

            // 搜索搜索列表（我发起的）
            searchExamine4(){
                this.keyWord4 = this.keyWord4.trim();
                this.$refs.search4.blur();
                this.$refs.fourth.$children[0].getList(this.keyWord4);
            },
            // 初始化列表（我发起的）
            initExamine4(){
                this.keyWord4 = '';
                this.$refs.search4.blur();
                this.$refs.fourth.$children[0].getList(this.keyWord4);
            },
            // 传输待我审批未处理的数量
            changeExamineByMeNum(val){
                this.examineByMeNum = val;
            },
            // 搜索搜索列表（抄送我的）
            searchExamine5(){
                this.keyWord5 = this.keyWord5.trim();
                this.$refs.search5.blur();
                this.$refs.fifth.$children[0].getList(this.keyWord5);
            },
            // 初始化列表（抄送我的）
            initExamine5(){
                this.keyWord5 = '';
                this.$refs.search5.blur();
                this.$refs.fifth.$children[0].getList(this.keyWord5);
            },
        }
    }
</script>

<style type="text/css" lang="scss">
    #examine{

        .index-container{
            width:100%;
            height:calc(100vh - 204px);;
            
            // 审批类型
            .examine-type{
                margin-bottom:20px;
                padding:0px 40px;
                height:60px;
                line-height:60px;
                font-size: 14px;
                color: #666666;
                letter-spacing: 0;
                background: #FFFFFF;
                box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                border-radius: 3px;
                
                li{
                    position:relative;
                    margin-right:60px;
                    height:100%;
                    
                    .el-badge{

                        .el-badge__content{
                            top: 50%;
                            left: 101%;
                            right: auto;
                            transform: translateY(-50%);
                        }

                    }

                    &.active{

                        color: #348EFC;

                        &::after{
                            content:"";
                            position:absolute;
                            bottom:1px;
                            left:0;
                            width:100%;
                            height:4px;
                            background: #348EFC;
                        }

                    }

                    &:last-child{

                        margin:12px 0;
                        width:300px;
                        height:36px;
                        background: #FFFFFF;
                        border: 1px solid #DDDDDD;
                        border-radius: 18px;

                        >div{

                            >input{

                                float:left;
                                box-sizing:border-box;
                                width:235px;
                                border:0 none;
                                font-size: 12px;
                                line-height:36px;
                                color: #333;
                                margin-left:20px;
                                &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
                                    color: #999999;
                                }

                                input:-moz-placeholder{
                                    color: #999999;
                                }

                                input::-moz-placeholder{
                                    color: #999999;
                                }

                                input:-ms-input-placeholder{
                                    color: #999999;
                                }

                            }
                            >i{
                                float:right;
                                margin-right:10px;
                                padding:11px 10px;
                                color:#999;
                            }
                        }
                    }
                 }
            }

            >div{
                width:100%;
                height:calc(100% - 80px);
                overflow-x:hidden;
            }
            
        }
        
    }
</style>